<template>
  <div class="brandmsg">
    <section class="clearfix">
      <div v-if="showAudit" class="audit">
        <span>信息审核中，暂时不能修改</span>
      </div>
      <div class="bradMsg">
        <h2>品牌信息</h2>
        <el-form
          ref="form"
          :model="form"
          label-width="110px"
        >
          <el-form-item label="品牌名称:">
            <p style="margin-top:14px;">三菱电动车</p>
          </el-form-item>
          <el-form-item label="品牌LOGO:">
            <img
              src="../../../assets/img/template-item2/brands/2.png"
              style="width:160px;
              height:90px;
              background:rgba(0,0,0,0);
              border:1px solid rgba(238,238,238,1);
              border-radius:4px;"
            >
          </el-form-item>
          <el-form-item label="品牌标语">

            <el-input
              v-model="form.slogan"
              style="width: 800px;
              height: 40px;"
              placeholder="请输入品牌名称（品牌名称与商标注册证书保持一致）"
            />
          </el-form-item>
          <el-form-item label="品牌注册地">
            <el-radio-group v-model="form.enroll">
              <el-radio label="国内" />
              <el-radio label="国外" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="品牌区域">
            <el-select
              v-model="form.province"
              placeholder="请选择省份"
            >
              <el-option
                label="区域一"
                value="shanghai"
              />
              <el-option
                label="区域二"
                value="beijing"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="品牌简介">
            <el-input
              v-model="form.intro"
              :rows="10"
              maxlength="2000"
              show-word-limit
              type="textarea"
              placeholder="展示品牌形象，请认真填写。"
            />
          </el-form-item>
          <el-form-item label="加盟需求">
            <el-select
              v-model="form.need"
              placeholder="选择投资金额区间"
            >
              <el-option
                label="1w-10w"
                value="shanghai"
              />
              <el-option
                label="10w-100w"
                value="beijing"
              />
            </el-select>
            <el-input
              v-model="form.condition"
              :rows="10"
              maxlength="2000"
              show-word-limit
              type="textarea"
              placeholder="加盟品牌，需要什么条件。请认真填写"
            />
          </el-form-item>
          <el-form-item label="加盟支持">

            <!-- <el-checkbox v-model="checked">备选项</el-checkbox> -->
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="店铺设计支持" />
              <el-checkbox label="装修支持" />
              <el-checkbox label="品牌宣传支持" />
            </el-checkbox-group>
            <el-input
              v-model="form.policy"
              maxlength="2000"
              show-word-limit
              type="textarea"
              :rows="10"
              placeholder="加盟品牌，有哪些政策支持，请认真填写"
            />
          </el-form-item>
          <el-form-item label="所属行业">
            <p style="margin-top: 16px;">橱柜</p>
          </el-form-item>
          <el-form-item label="经营方式">
            <el-select
              v-model="form.business"
              placeholder="请选择经营方式"
            >
              <el-option
                label="民营"
                value="minying"
              />
              <el-option
                label="国营"
                value="guoying"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="公司网址">
            <el-input v-model="form.url" placeholder="请输入公司网址" />
          </el-form-item>
        </el-form>
      </div>

      <el-button
        type="primary"
        @click="outerVisible = true"
      >提交</el-button>
    </section>

    <!-- 点击提交按钮所的、弹出的对话框 -->
    <el-dialog
      :visible.sync="outerVisible"
      center
    >
      <img src="../../../assets/img/template-item2/icons/tanchuang_icon_tishi.png" alt="">
      <p>提交后将进入信息审核流程，所填写的信息在审核过程中不能进行修改</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="innerVisible">确认提交</el-button>
        <el-button type="primary" @click="outerVisible = false">返回修改</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      checkList: ['', ''],
      form: {
        slogan: '',
        enroll: '',
        province: '',
        intro: '',
        need: '',
        condition: '',
        policy: '',
        business: '',
        utl: ''
      },
      outerVisible: false,
      showAudit: false
    }
  },
  created() { },
  methods: {
    innerVisible() {
      console.log('submit!')
      this.outerVisible = false
      this.showAudit = true
      this.$message({
        message: '提交成功，信息审核不能修改',
        type: 'warning'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.brandmsg {
  width: 100%;
  max-width: 1920px;
  min-width: 1200px;
}

section {
  width: 1200px;
  margin: 30px auto;
}

.bradMsg {
  width: 1200px;
  background: rgba(255, 255, 255, 1);
  /* padding: 20px 30px; */
  margin-top: 20px;
  border: 1px solid #ECECEC;
}

.bradMsg h2 {
  width: 100%;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: #787878;
  border-bottom:1px solid #cccccc;
  padding: 20px 20px;
}

section .el-form{
  padding: 20px 30px;
}

section .el-form-item{
  border-bottom: 1px solid #F6F6F6;
  padding-bottom: 20px;
}
section .el-form-item__content .el-select {
  margin-bottom: 10px;
}
section>.el-button{
  width: 190px;
  height: 56px;
  position: relative;
  left: 50%;
  margin: 40px 0 40px -110px;
}

.el-dialog__body p{
  width:576px;
  height:73px;
  font-size:24px;
  font-weight:400;
  line-height:42px;
  color:rgba(51,51,51,1);
}

.audit{
  width:1200px;
  height:60px;
  text-align: center;
  line-height: 60px;
  margin-top: 20px;
}

.audit span{
  width:288px;
  height:32px;
  font-size:24px;
  font-weight:600;
  line-height:32px;
  color: #787878;
}
.dialog-footer .el-button{
  width:123px;
  height:41px;
  background:#DC3535;
  border-radius:4px;
  margin-right: 15px;
  color: #fff;
}

</style>

